<template>
  <el-container class="zhuti">
    <!-- 头部 -->
    <el-header>
      <div class="a1">
        <span>{{ this.$store.state.adminData.adminName }}编辑,你好</span>
      </div>
      <el-button @click="open">举报记录</el-button>
      <el-button type="info" @click="TC" class="a2">退出</el-button>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          router
        >
          <!-- 一级菜单 :default-active="activePathadmin"-->
          <el-menu-item
            index="guanUser"
            @click="saveNav('/guanUser')"
            class="ce"
          >
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item
            index="guanWriter"
            @click="saveNav('/guanWriter')"
            class="ce"
          >
            <i class="el-icon-edit"></i>
            <span slot="title">作者管理</span>
          </el-menu-item>
          <el-menu-item
            index="guanBook"
            @click="saveNav('/guanBook')"
            class="ce"
          >
            <i class="el-icon-collection"></i>
            <span slot="title">作品管理</span>
          </el-menu-item>
          <el-menu-item
            index="guanTitle"
            @click="saveNav('/guanTitle')"
            class="ce"
          >
            <i class="el-icon-document"></i>
            <span slot="title">章节管理</span>
          </el-menu-item>
          <el-menu-item index="shenhe" @click="saveNav('/shenhe')" class="ce">
            <i class="el-icon-finished"></i>
            <span slot="title">审核管理</span>
          </el-menu-item>
          <el-menu-item index="tuijian" @click="saveNav('/tuijian')" class="ce">
            <i class="el-icon-setting"></i>
            <span slot="title">推荐管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <div id="jubao" v-for="(item,i) in jubao" :key="i">
          <div class="theid">          
            <el-tooltip class="item" effect="dark" content="举报编号" placement="top">
            <span style="color:blue">{{item._id}}</span>
            </el-tooltip>
          </div>
          <div class="theid">
          <el-tooltip class="item" effect="dark" content="举报书籍编号" placement="top">
            <span style="color:red">{{item.bookid}}</span>
          </el-tooltip>
          </div>
          <div class="theid">
          <el-tooltip class="item" effect="dark" content="举报人编号" placement="top">
            <span style="color:green">{{item.userid}}</span>
          </el-tooltip>
          </div>
          <div>
            <el-tooltip class="item" effect="dark" content="举报理由" placement="top">
            <span>{{item.reason}}</span>
          </el-tooltip>
          </div>
          <div>
          <el-tooltip class="item" effect="dark" content="举报时间" placement="top">
            <span>{{item.date | date}}</span>
          </el-tooltip>
          <span id="dui" style="color:green;margin-left:8px" @click="gai(item._id)">√</span>
          </div>
          </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  // 生命周期函数，调用getMenuList
  created() {
    this.activePathadmin = window.sessionStorage.getItem("activePathAdmin");
  },
  data() {
    return {
      adminname: "",
      //被激活的地址保存
      activePathadmin: "",
      dialogVisible:false,
      jubao:[1]
    };
  },

  methods: {
    // 退出按钮
    TC() {
      window.sessionStorage.removeItem("adminId");
      window.sessionStorage.removeItem("adminName");
      window.sessionStorage.removeItem("adminToken");
      this.$router.push("/adminLogin");
    },
    //获取所有菜单

    //保存侧边栏状态
    saveNav(activePathAdmin) {
      window.sessionStorage.setItem("activePathAdmin", activePathAdmin);
      this.activePathAdmin = activePathAdmin;
    },
    async open(){
      const {data:res} = await this.$http.get('/admins/getJu')
      if(res.status == 200){
        this.jubao = res.ju;
        this.dialogVisible = true;
      }
    },
    async gai(id){
      const {data:res} = await this.$http.post(`/admins/upJu/${id}`);
      if (res == 'OK') {
        return this.open()
      }
    }
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0px;
  padding: 0px;
}

.zhuti {
  height: 100%;
  width: 100%;
}

.el-header {
  position: relative;
  background-color: rgb(132, 154, 175);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0px;
  color: rgb(22, 24, 24);
  font-size: 20px;

  .a1 {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;

    span {
      margin-left: 10px;
    }
  }

  /* .a2{
        position: absolute;
        top:15%;
        right: 3%;
    } */
}

.el-aside {
  background-color: #333744;

  .el-menu {
    border-right: 0px;
  }
}

.el-main {
  background-color: rgba(210, 225, 238, 0.6);
}
.ce {
  font-size: 18px;
}
#jubao{
  font-size: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(210, 225, 238, 0.6);
}
.theid{
  display: inline-block;
  margin-left: 10px;
}
#dui:hover{
  cursor: pointer;
}
</style>
